import AutoComplete from 'antd/es/auto-complete';
import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useMemo, useState } from 'react';
import { flattenModels } from '../../../../util';
import { BlockPicker } from 'react-color';
import message from 'antd/es/message';

export function HighlightDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app, jsonData } } = AppStore.useContainer();
    const [inputModelId, setInputModelId] = useState<string>();
    const [color, setColor] = useState<string>('#C7FF8E');


    const models = useMemo(() => {
        return flattenModels(jsonData?.paramModel || []);
    }, [jsonData])



    const CModelApis = [{
        name: '高亮指定模型',
        onClick: () => inputModelId && app!.highlightService.highlight([{ id: inputModelId, color: color }])
    }, {
        name: '取消指定模型高亮',
        onClick: () => inputModelId && app!.highlightService.unHighlight([inputModelId])
    }, {
        name: '取消全部模型高亮',
        onClick: () => app!.highlightService.clearHighlight()
    }, {
        name: '获取当前高亮模型',
        onClick: () => {
            const highlighted = app!.highlightService.getHighlighted();
            if (highlighted.length) {
                message.info(highlighted.join(';'))
            } else {
                message.error('未高亮任何模型!');
            }
        }
    }]

    return <>
        <Divider>模型高亮</Divider>
        <BlockPicker color={color} onChange={c => setColor(c.hex)} />
        <AutoComplete value={inputModelId} onChange={(data) => setInputModelId(data)} style={{ width: '100%' }} placeholder='输入或者选择模型id' options={models.map(m => ({ value: m.id }))} />
        {createButton(CModelApis)}
    </>
}